<template>
  <div>
    <div class="server_container">
      <div class="sever_header">
        <van-tabs v-model="active">
          <van-tab title="商品介绍">
            <div v-html="list.content" class="active_left"></div>
          </van-tab>
          <van-tab title="商品评价">
            <div class="goodReputation">
              <li v-for="(item, index) in resList" :key="index">
                <div class="div">
                  <img :src="item.goods.pic" alt="" />
                </div>
                <div class="div2">
                    <div class="div2_a">
                        <span>{{item.goods.id}}</span>
                        <span>{{item.goods.goodReputationStr}}</span>
                    </div>
                    <div class="div2_b">{{item.goods.goodReputationRemark}}</div>
                    <div class="div1_c">
                        <span>{{item.goods.dateReputation}}</span>
                        <span class="span">{{item.goods.property}}</span>
                    </div>
                </div>
              </li>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      list: [],
      resList: [],
    };
  },
  mounted() {
    this.$API
      .comdet(this.$route.query.id)
      .then((res) => {
        this.list = res.data.data;
        console.log(this.list);
      })
      .catch((error) => {
        console.log(error);
      });

    this.$API
      .evaluate(this.$route.query.id)
      .then((res) => {
        this.resList = res.data.data;
        console.log(this.resList);
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>
<style lang="scss">
.server_container {
  width: 100%;
background-color: white;
  margin-top: 10px;
  //   background-color: goldenrod;
  .sever_header {
    width: 100%;
    overflow: hidden;
  }
}
.active_left {
  width: 100%;
 li{
     display: flex;
 }

    
      img{
            width: 100% !important;
        height: 100% !important;

  }
}
.goodReputation {
  width: 100%;
 
  li {
    width: 100%;
    height: 2.4rem;
    display: flex;
    .div {
      width: 20%;
      height: 100%;
      text-align: center;
      img {
        width: 90% ;
        height: 70% ;
      }
    }
    .div2{
        width: 80%;
         box-sizing: border-box;
         padding-left: 0.1rem;
        height: 100%;
        .div2_a{
            margin-top: 0.1rem;
        }
        .div2_b{
            margin-top: 0.2rem;
        }
        .div1_c{
            margin-top: 0.2rem;
            span{
                color: gray;
                margin-right: 1.2rem;
            }
           
        }
    }
  }
}
</style>